<template lang="html">
    <div class="">
        
        <div class="top_block">
            <el-button
                type="primary"
                @click="addAccountDialog"
                class="timeoffButton"
                size="small">
                新增账户
            </el-button>
        </div>
        <div class="table_block">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                class="tableDatadisplay">
                <el-table-column
                    prop="timeoff_days"
                    label="账户名称"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.accountName}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="timeoff_days"
                    label="账户所有人"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.personName}}</div>
                    </template>
                </el-table-column>                                   
                <el-table-column
                    label="账户余额"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.accountBalance}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="账户创建时间"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{$moment(scope.row.endTime).format('YYYY-MM-DD')}}</span>
                    </template>
                </el-table-column>                
                <el-table-column
                    label="账户类型"
                    align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.accountType == 1" style="color:green;">{{scope.row.accountType | dataFormat(accountTypeArray)}}</div>
                        <div v-else style="color:red;">{{scope.row.accountType | dataFormat(accountTypeArray)}}</div>
                    </template>                    
                </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text"  @click="updateAccountBalance(scope.row)">变更账户</el-button>
                    <el-button size="mini" type="text"  @click="dealDetails(scope.row.accountId)">交易记录</el-button>                                             
                </template>
            </el-table-column>                
            </el-table>
        </div>



        <div>
        <!--prev表示上一页，next为下一页，pager表示页码列表,total表示总条目数，size用于设置每页显示的页码数量。-->
            <el-pagination
                background
                layout="total,prev,sizes, pager, next,jumper"
                :total="total"
                :page-sizes="[5, 10, 15, 20]"
                :page-size.sync="formSearch.pageSize"
                :current-page.sync="formSearch.pageNum"
                @current-change="getPage"
                @size-change="getPage"
                style="float: right">
            </el-pagination>
        </div>


        <el-dialog
            title="新增账户"
            :visible.sync="addAccountVisalbe"
            :before-close="handleDialogClose">
            <el-form
                ref="addAccountForm"
                :model="addAccountForm"
                label-position="right"
                label-width="80px"> 
                <el-form-item
                    label="账户名称">
                    <el-input v-model="addAccountForm.accountName" placeholder="请输入账户名称"></el-input>
                </el-form-item>
                <el-form-item label="账户所有人" prop="personName">
                    <el-autocomplete
                        v-model="addAccountForm.personName"
                        :trigger-on-focus="false"
                        :fetch-suggestions="queryUserByUsername"
                        placeholder="请输入员工姓名"
                        @select="handleSelect"
                    ></el-autocomplete>
                </el-form-item>                                  
                <el-form-item
                    label="账户余额">
                    <el-input v-model="addAccountForm.accountBalance" placeholder="请输入账户余额"></el-input>
                </el-form-item>                               
                <el-form-item
                    label="账户类型:">
                    <el-select
                        v-model="addAccountForm.accountType"
                        placeholder="请选择账户类型"
                        size="small">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>              
            </el-form>
                <div
                    slot="footer"
                    class="dialog-footer">
                    <el-button
                        @click="handleDialogClose"
                        size="small">
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        @click="saveAccount"
                        size="small">
                        确 定
                    </el-button>
                </div>
        </el-dialog>
        <div>
            <el-dialog
                title="变更账户"
                :visible.sync="updateAccountVisible">   
                <el-form
                    ref="updateAccountForm"
                    :model="updateAccountForm"
                    label-position="right"
                    label-width="100px"> 
                    <el-form-item
                        label="账户名称:">
                        <el-input style="width:500px;" v-model="updateAccountForm.accountName" placeholder="请输入账户名称" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="账户所有人:" prop="personName">
                        <el-autocomplete
                            style="width:500px;"                            
                            v-model="updateAccountForm.personName"
                            :trigger-on-focus="false"
                            :fetch-suggestions="queryUserByUsername"
                            placeholder="请输入员工姓名"
                            @select="handleSelect"
                            disabled
                        ></el-autocomplete>
                    </el-form-item>                      
                    <el-form-item
                        label="账户余额:">
                        <el-input style="width:500px;" v-model="updateAccountForm.accountBalance" placeholder="请输入要变更的账户余额" ></el-input>
                    </el-form-item>           
                </el-form>     
                <div
                    slot="footer"
                    class="dialog-footer">
                    <el-button
                        @click="updateAccountVisible = false"
                        size="small">
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        @click="updateAccount"
                        size="small">
                        确 定
                    </el-button>
                </div>                                  
            </el-dialog>            
        </div>
    </div>
</template>

<script>
import salary from '../../../api/salary'
import dept from '../../../api/department.js';
import user from '../../../api/user.js';
import bus from '../../../api/eventBus';
export default {
    name:"account",
    data(){
        return{
            tableData:[],
            total:0,
            formSearch:{
                pageNum:1,
                pageSize:10
            },
            //dialog的显示
            addAccountVisalbe: false,
            //表单初始化
            addAccountForm: {

            },
            //变更账户所有人
            updateAccountForm:{
                accountName:'',
                accountBalance:''
            },
            updateAccountVisible:false,
            //
            accountTypeArray:[
                {value:1,name:'正式账户'},
                {value:2,name:'测试账户'}                                                                
            ],
            //
            options: [
                {value: '1',label: '正式账户'}, 
                {value: '2',label: '测试账户'}
            ],
        }
    },
    created(){
        this.getPage();
    },
    filters:{
        //类型过滤
        dataFormat(value,list){
            return value || value == '1' ? list.filter( (item) => item.value == value)[0].name:""
        }
    },
    mounted(){

    },
    methods:{
        //分页
        async getPage(){
            const res = await account.list(this.formSearch);
            if(res.data.code=== '000'){
                this.tableData=res.data.data.records;
                this.total=res.data.data.total;
            }
        },        
        addAccountDialog(){
            this.addAccountVisalbe = true
        },
        //新增账户
        saveAccount(){
            this.$refs.addAccountForm.validate((valid) => {
                if (valid) {
                account.saveAccount(this.addAccountForm).then(res =>{
                    if(res.data.code=== '000'){
                        this.handleDialogClose();
                        this.getPage()
                        this.$message.success("添加成功")
                    }else{
                        this.$message.error("添加失败")
                    }
                })
                } else {
                    return false;
                }
            });            
        },        
        //当对话框关闭时，初始化数据
        handleDialogClose() {
            this.addAccountForm = {
                accountName: '',
                accountType: '',
                accountBalance: '',
                leaveInfo: '',
                leaveTime: ''
            };
            this.addAccountVisalbe = false;
        }, 
        //搜索所有用户
        async queryUserByUsername(username,cb){
            const res = await user.queryUserByUsername({username:username})
            if(res.data.code === '000'){
                let arr = res.data.data
                if( res.data.data == undefined){
                cb(arr);
                }else {
                arr.forEach( item =>{
                    item.value = item.personName
                })
                cb(arr);
                }
            }
        },
        handleSelect(item) {
            this.addAccountForm.username = item.username
            this.addAccountForm.userId = item.userId
            this.addAccountForm.personName = item.personName         
        }, 
        //交易记录  
        dealDetails(accountId){           
            this.$router.push('/finance/deal')
            setTimeout( () =>{
                bus.$emit("accountId",accountId);
            },20)
        },
        //变更账户余额
        updateAccountBalance(data){
            this.updateAccountVisible = true
            this.updateAccountForm.accountName = data.accountName
            this.updateAccountForm.accountBalance = data.accountBalance
            this.updateAccountForm.accountId = data.accountId
            this.updateAccountForm.oldAccountBalance = data.accountBalance
            this.updateAccountForm.personName = data.personName            
            
        },
        async updateAccount(){
            const res =  await account.updateAccount(this.updateAccountForm)
            console.log(res);
            if(res.data.code === '000'){
                this.$message.success("变更余额成功")
                this.updateAccountVisible = false
                this.getPage()
            }else {
                this.$message.error(res.data.msg)
            }

        }     
    }
}
</script>

<style scoped >
.top_block{
    width: 100%;
    height: 50px;
    background:white;
    border-radius: 10px;

}
.table_block{
    margin-top: 50px;
}
.timeoffButton {
    margin-top: 10px;
    margin-left: 80px;
    float: left;
}
</style>
